<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作导航条</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #nav{
            margin: 50px 0;
            width: 100vw;
            height: 40px;
            background-color: #eeeeee;
            display: flex;
            align-items: center;
        }
        #nav .title{
            width: 100px;
            height: 60px;
            background-color: #369;
            color: white;
            line-height: 60px;
            margin-left: 50px;
            text-align: center;
            transform: skew(-15deg);
        }
        #nav li{
            padding: 0 10px;
            margin: 0 20px;
            cursor: pointer;
            height: 40px;
            line-height: 40px;
            border-bottom: 2px solid transparent;
        }
        #nav li:hover{
            border-bottom: 2px solid #369;
        }
    </style>
</head>
<body>
    <ul id="nav">
        <li class="title">课程</li>
        <!-- <li>Web</li>
        <li>Java</li>
        <li>Big Data</li>
        <li>Cloud</li>
        <li>AI</li> -->
    </ul>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        //$('<标签名/>') 是jquery创建标签的方式
        //html()方法 ==> js中的innerHTML属性
        //text()方法 ==> js中的innerText属性
        //append()方法 ==> js中的appendChild()方法
        //加载菜单的方法
        function loadMenu(){
            //ajax请求一个本地的json文件
            $.get('./data/menu.json',res=>{
                res.data.forEach(r=>{
                    //创建一个li标签
                    let li = $('<li/>').text(r.name)
                    //将li标签追加到#nav中
                    $('#nav').append(li)
                })
            })
        }
        loadMenu();
    </script>
</body>
</html>